<ion-header>
    <ion-toolbar color="primary">
        <ion-icon name="arrow-back" class="bar-btn" (click)="back()" slot="start"></ion-icon>
        <ion-title>预览</ion-title>
    </ion-toolbar>
</ion-header>

<!--<ion-content>-->
<!--    <ion-img *ngIf="picUrl != null" [src]="picUrl"></ion-img>-->
<!--    <iframe *ngIf="txtUrl != null" [src]="txtUrl" class="iframe" height="100%" width="100%"-->
<!--            frameborder="no" border="0" marginwidth="0"></iframe>-->
<!--    <iframe *ngIf="pdfUrl != null" [src]="pdfUrl" class="iframe" height="100%" width="100%"-->
<!--            frameborder="no" border="0" marginwidth="0"></iframe>-->
<!--</ion-content>-->


<ion-content>
    <div class="content-background">
        <div class="content-header" >
            <div class="content-div" style="line-height: 30px;padding: 4px 8px; font-size: 14px; font-weight:bold;">
                <div style=" float: left; clear: both; position: fixed; display: inline-block; ">
                    {{ filename }}
                </div>
                <div style="cursor: pointer; line-height: 30px; margin-left: calc(50% - 80px);
            margin-right: 20px; display: inline-block;" (click)="backward()">
            <span style="font-weight: bold;user-select: none;">
              <i nz-icon nzType="left" nzTheme="outline"></i>
            </span>
                </div>
                <div style="display: inline-block">{{ index }} / {{ total }}</div>
                <div style="cursor: pointer; line-height: 30px; display: inline-block; margin-left: 20px; "
                     (click)="forward()">
            <span style="font-weight: bold;user-select: none;">
              <i nz-icon nzType="right" nzTheme="outline"></i>
            </span>
                </div>
            </div>
        </div>
        <div class="content-table" style="height: calc(100% - 56px);">
            <iframe [src]="trustUrl(selecthtml)" width="100%" height="100%" frameborder="0">
            </iframe>
        </div>
    </div>

</ion-content>
